<!DOCTYPE html>
<html>
<!--
百度地图，
JavaScript API支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。
移动平台的屏幕尺寸通常比PC或笔记本要小，操作方式也有所不同。为了更好的在手机浏览器上展示地图，我们有如下建议：
将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。
添加下面的meta标签： <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
这样做是为了让页面以正常比例进行显示并且禁止用户

兼容性
浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
操作系统：Windows、Mac、Linux
移动平台：iPhone、Android


示例请看这里：  http://lbsyun.baidu.com/index.php?title=jspopular/guide/helloworld
-->
<head>
    <title>百度地图手机端展示示例</title>
    <meta charset="utf-8"/>
    <!--下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示-->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <!--设置容器样式大小，使地图充满整个浏览器窗口-->
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #map {
            height: 100%
        }
    </style>
    <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>-->
    <!--引用百度地图API文件,使用异步方式引入，所以暂时注释掉这个方式-->
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>-->
    <script type="text/javascript">
        // 异步加载百度地图api
        function loadScript() {
            var script = document.createElement("script");
//            script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";
            //这里引入你的密钥
            script.src = "http://api.map.baidu.com/api?v=2.0&ak=LEcbzkafmsymyGGLcT1XWtuI2tbksXnc&callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

        function initialize() {
            //加载数据
            loadData();
        }

        var data = [];//市数据
        var data2 = [];//区数据
        var mp = null;//地图
        var level = 9;//默认地图级别13
        var tempItem = {};//记录临时数据

        function loadData() {
            var url = 'http://192.168.1.111:8081/hscloud/api' + '?getStr='
            var param = {
                "type": "6003",
                "token": "5a6662af85697ab5c5013331e0a00526",
                "filters": {
                    "regional_code": "370200"
                }
            }
            url = url + JSON.stringify(param);
//            $.ajax({
//                type: 'GET',
//                dataType: "json",
//                url: url,
//                success: function (result) {
//                    alert(result)
//                    console.log(JSON.stringify(result));
//                    if (result && result.data && result.code === 1) {
//                        data = result.data;
//                    }
//                },
//                error:function (err) {
//                    console.error(err);
//                }
//            });
            data = [
                {
                    "num": 2,
                    "regional_name": "市南区",
                    "longitude": "120.37618412944",
                    "regional_level": 3,
                    "latitude": "36.072517005321",
                    "regional_code": "370202"
                },
                {
                    "num": 1,
                    "regional_name": "市北区",
                    "longitude": "120.37849501736",
                    "regional_level": 3,
                    "latitude": "36.100057507009",
                    "regional_code": "370203"
                },
                {
                    "num": 1,
                    "regional_name": "黄岛区",
                    "longitude": "120.16954109898",
                    "regional_level": 3,
                    "latitude": "36.005019406172",
                    "regional_code": "370211"
                },
                {
                    "num": 1,
                    "regional_name": "崂山区",
                    "longitude": "120.58490643507",
                    "regional_level": 3,
                    "latitude": "36.195587169547",
                    "regional_code": "370212"
                },
                {
                    "num": 1,
                    "regional_name": "李沧区",
                    "longitude": "120.43114552866",
                    "regional_level": 3,
                    "latitude": "36.192897252321",
                    "regional_code": "370213"
                },
                {
                    "num": 1,
                    "regional_name": "城阳区",
                    "longitude": "120.34632618533",
                    "regional_level": 3,
                    "latitude": "36.284246909785",
                    "regional_code": "370214"
                },
                {
                    "num": 1,
                    "regional_name": "胶州市",
                    "longitude": "119.95942122689",
                    "regional_level": 3,
                    "latitude": "36.248031458483",
                    "regional_code": "370281"
                },
                {
                    "num": 1,
                    "regional_name": "即墨市",
                    "longitude": "120.52110561991",
                    "regional_level": 3,
                    "latitude": "36.487908601599",
                    "regional_code": "370282"
                },
                {
                    "num": 1,
                    "regional_name": "平度市",
                    "longitude": "119.95106201677",
                    "regional_level": 3,
                    "latitude": "36.788550047135",
                    "regional_code": "370283"
                },
                {
                    "num": 1,
                    "regional_name": "莱西市",
                    "longitude": "120.44283105064",
                    "regional_level": 3,
                    "latitude": "36.863636936232",
                    "regional_code": "370285"
                }
            ];
            //实例化地图
            initMap();
        }

        function initMap() {
            //            创建地图实例
//                注意：
//                1.在调用此构造函数时应确保容器元素已经添加到地图上。
//                2.命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
            mp = new BMap.Map('map');
//            设置中心点坐标
//            请注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，
//            如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！
//            var point = new BMap.Point(116.404, 39.915);// 这个坐标是天安门
            var point = new BMap.Point(120.38385, 36.095095);// 这个坐标 随便取自青岛
            //根据地址描述获得坐标信息
            // 创建地址解析器实例
            var geo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上，并调整地图视野
//            geo.getPoint("青岛市", function (p) {
//                    if (p) {
//                        point = p;
//                        console.log(point);
//                    }
//                },
//                "青岛市");
            // 地图初始化，同时设置地图展示级别
            mp.centerAndZoom(point, level);
            mp.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

            //向地图添加控件
//            控件	类名	简介
//            抽象基类	Control	所有控件均继承此类的方法、属性。通过此类您可实现自定义控件
//            平移缩放控件	NavigationControl	PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方
//            缩略地图	OverviewMapControl	默认位于地图右下方，是一个可折叠的缩略地图
//            比例尺	ScaleControl	默认位于地图左下方，显示地图的比例关系
//            地图类型	MapTypeControl	默认位于地图右上方
//            版权	CopyrightControl	默认位于地图左下方
//            定位	GeolocationControl	针对移动端开发，默认位于地图左下方

            mp.addControl(new BMap.NavigationControl());
            mp.addControl(new BMap.OverviewMapControl());
            mp.addControl(new BMap.ScaleControl());
            mp.addControl(new BMap.MapTypeControl());
//          mp.addControl(new BMap.CopyrightControl());
            mp.addControl(new BMap.GeolocationControl());

            // 地图缩放时监听
            mp.addEventListener("zoomend",function(){
//                console.log(mp.getZoom())
                if(mp.getZoom() >=14){//显示区内相信机构坐落图
                    mp.clearOverlays();//清除所有覆盖物
                    addMapLabel2();
                }else{
                    mp.clearOverlays();//清除所有覆盖物
                    addMapLabel();
                }
            })

            // 向地图添加标注
            addMapLabel();
        }

        //向地图添加文本标注
        function addMapLabel() {
            for (var i = 0; i < data.length; i++) {
                addLabel(data[i]);
            }
        }

        function addLabel(item) {
            var option = null;
            if (item.longitude & item.latitude) {
                option = {
                    position: new BMap.Point(item.longitude, item.latitude)
                };
            }
            item.regional_name ? item.regional_name : item.regional_name = '';
            item.num ? item.num : item.num = 0;
            var label = new BMap.Label(item.regional_name + item.num + '个', option);
            label.setStyle({
                color: "white",
                backgroundColor: "red",
                fontSize: "0.5em",
                height: "70px",
                width: "70px",
                lineHeight: "70px",
                opacity: 0.8,
                textAlign: "center",
                borderRadius: "50%",
                fontFamily: "微软雅黑"
            });
            label.addEventListener("click", function (e) {
                mp.centerAndZoom(new BMap.Point(item.longitude, item.latitude), 14);
////                    mp.setZoom(level+3);
                mp.clearOverlays();//清除所有覆盖物
                loadData2();
            });
            mp.addOverlay(label);
        }

        function loadData2() {
            //ajax加载数据
            data2 = [
                {
                    name: "市南区图书馆",
                    log: 120.410295,
                    lat: 36.080277
                },
                {
                    name: "青岛图书馆2",
                    log: 120.374301,
                    lat: 36.075341
                },
            ];
            addMapLabel2();
        }
        function addMapLabel2() {
            for (var i = 0; i < data2.length; i++) {
                addLabel2(data2[i]);
            }
        }
        function addLabel2(item) {
            var option = null;
            if (item.log & item.lat) {
                option = {
                    position: new BMap.Point(item.log, item.lat)
                };
            }
            var label = new BMap.Label(item.name, option);
            label.setStyle({
                height: '30px',
                width: "80px",
                borderRadius: "5%",
                color: "#fff",
                backgroundColor: "blue",
                opacity: 0.5,
                border: 'none',
                fontWeight: 'bold',
                fontFamily: "微软雅黑"
            });
            label.addEventListener("click", function (e) {
                alert(JSON.stringify(item))
            });
            mp.addOverlay(label);
        }


        // 标注海量点进行展示
        /*  var data = [
              [120.38385, 36.095095],
              [120.415854, 36.082633]
          ];
          var points = [];  // 添加海量点数据
          for (var i = 0; i < data.length; i++) {
              points.push(new BMap.Point(data[i][0], data[i][1]));
          }
          var options = {
              size: BMAP_POINT_SIZE_HUGE,
              shape: BMAP_POINT_SHAPE_CIRCLE,
              color: '#d340c3'
          }
          var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
          pointCollection.addEventListener('click', function (e) {
              alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
          }
          mp.addOverlay(pointCollection);  // 添加Overlay
*/

    </script>


<body>
<!--创建地图容器元素-->
<div id="map"></div>

</body>
</html>
</syntaxhighlight>